import { RootState } from "@/redux";
import { Descriptions, Drawer, Tag } from "antd";
import React, { useMemo, useState } from "react";
import { useSelector } from "react-redux";
import { Image } from "antd";
import zhanwei from "@/assets/images/zhanwei.png";
import { useNavigate } from "react-router-dom";

const BlogDetail: React.FC = props => {
	const data = useSelector((state: RootState) => state.blog.blogDetail);

	const isTop = useMemo(() => {
		if (data.top) return "是";
		else return "否";
	}, [data.top]);

	const navigate = useNavigate();

	const gotoEditor = (id: number) => {
		navigate(`/blog/editor`, { state: { id: id } });
	};

	return (
		<Descriptions title="博客" bordered column={1}>
			<Descriptions.Item label="内容">{data.title}</Descriptions.Item>
			<Descriptions.Item label="发布人">{data.author}</Descriptions.Item>
			<Descriptions.Item label="置顶">{isTop}</Descriptions.Item>
			<Descriptions.Item label="标签">
				{data.tags.map(item => {
					return (
						<Tag color="magenta" key={item.id}>
							{item.tag_name}
						</Tag>
					);
				})}
			</Descriptions.Item>
			<Descriptions.Item label="所属分栏">{data.classify}</Descriptions.Item>
			<Descriptions.Item label="内容">{<a onClick={() => gotoEditor(data.id)}>编辑器</a>}</Descriptions.Item>
			<Descriptions.Item label="阅读">{data.blog_read}</Descriptions.Item>
			<Descriptions.Item label="点赞">{data.blog_like}</Descriptions.Item>
			<Descriptions.Item label="封面">
				<Image
					width={140}
					height={80}
					src={data.blog_image}
					key={data.id}
					placeholder={<Image width={140} height={80} preview={false} src={zhanwei} />}
				></Image>
			</Descriptions.Item>
			<Descriptions.Item label="创建时间">{data.createdAt}</Descriptions.Item>
			<Descriptions.Item label="更新时间">{data.updatedAt}</Descriptions.Item>
		</Descriptions>
	);
};

export default BlogDetail;
